<template>
  <v-card>
    <v-card-title class="align-start flex flex-row justify-space-between p-5">
      <span class="text-[#736B7D] font-semibold">{{ t('message.dashboard.performance.title') }}</span>
      <v-spacer></v-spacer>
      <v-btn
        icon
        small
        flat
        class="me-n3 mt-n2"
      >
        <v-icon size="22" color="#736B7D">
          mdi-dots-vertical
        </v-icon>
      </v-btn>
    </v-card-title>

    <!-- Chart -->
    <div class="p-2">
      <vue-apex-charts
        height="320px"
        :options="chartOptions"
        :series="chartData"
      ></vue-apex-charts>
    </div>
  </v-card>
</template>

<script setup lang="ts">
import VueApexCharts from 'vue3-apexcharts'
import {useI18n} from "vue-i18n"
import {performanceApi} from "@/api/dashboard";
import {reactive} from "vue";
import UserStore from "@/store/UserStore";

const {t} = useI18n()

const chartOptions = {
  chart: {
    type: 'radar',
    toolbar: {
      show: false,
    },
  },
  colors: ['transparent', '#9155fd', '#16b1ff'],
  legend: {
    show: true,
    labels: {
      colors: 'rgba(94, 86, 105, 0.87)',
    },
  },
  plotOptions: {
    radar: {
      size: 80,
      polygons: {
        strokeColors: ['#ebe9f1', 'transparent', 'transparent', 'transparent', 'transparent', 'transparent'],
      },
    },
  },
  fill: {
    type: 'gradient',
    gradient: {
      shade: 'dark',
      gradientToColors: ['transparent', '#9155fd', '#6acdff'],
      shadeIntensity: 1,
      type: 'vertical',
      opacityFrom: 1,
      opacityTo: 0.9,
      stops: [0, 100, 100, 100],
    },
  },
  markers: {
    size: 0,
  },
  xaxis: {
    categories: [t('message.dashboard.performance.teams'), t('message.dashboard.performance.pledge'), t('message.dashboard.performance.proposal'),
    t('message.dashboard.performance.kol'), t('message.dashboard.performance.vote'), t('message.dashboard.performance.lp')],
    labels: {
      show: true,
      style: {
        fontSize: '10px',
        cssClass: 'apexcharts-xaxis-label',
      },
    },
  },
  yaxis: {
    show: false
  },
  grid: {
    show: false,
  },
}

const chartData = reactive<any>( [
  {
    name: '',
    data: [100, 100, 100, 100, 100, 100],
  },
  {
    name: t('message.dashboard.performance.web'),
    data: [60, 60, 60, 60, 60, 60],
  }
])

const userStore = UserStore()

performanceApi().then((res:any) => {
  console.log('performanceApi res:', res)
  const data:any = []
  for (let key in res) {
    data.push(res[key])
  }
  console.log('data:', data)
  const emptyData = [0, 0, 0, 0, 0, 0]
  const personalData = {
    name: t('message.dashboard.performance.personal'),
    data: userStore.userInfo !== undefined ? data : emptyData
  }
  chartData.push(personalData)
  console.log('chartData:', chartData)
})
</script>

<style lang="scss">
.apexcharts-xaxis-label {

}
  </style>
